<script setup>
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  }
})

//根据传入的颜色生成背景色 透明色 rgba(#,#,#,0.1) 传入颜色值 如果
const colorToRgb = color => {
  //如果是16进制颜色 ，16进制颜色转换成rgba
  if (color.indexOf('#') !== -1) {
    let r = parseInt(color.slice(1, 3), 16)
    let g = parseInt(color.slice(3, 5), 16)
    let b = parseInt(color.slice(5, 7), 16)
    return `rgba(${r},${g},${b},0.1)`
  }
  //如果是rgb颜色
  if (color.indexOf('rgb') !== -1) {
    return color.replace('rgb', 'rgba').replace(')', ',0.1)')
  }
}
</script>

<template>
  <div :style="`--bgc:${colorToRgb(color)};--color:${color}`" class="salary-status-bgc">
    <span class="ripple"></span>
    <span>{{ title }}</span>
  </div>
</template>

<style scoped lang="less">
.salary-status-bgc {
  position: relative;
  width: fit-content;
  padding: 4px 8px 4px 24px;
  border-radius: 6px;
  background: var(--bgc);
  color: var(--color);
}
.ripple {
  position: absolute;
  top: 11px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color);
}
</style>
